<template>
  <div class="map-container">
    <baidu-map
      :ak="map.ak"
      :zoom="map.zoom"
      :center="{ lng: map.center.lng, lat: map.center.lat }"
      :scroll-wheel-zoom="true"
      class="map-box"
    >
      <!--动态添加的点坐标-->
      <bm-marker
        v-for="(marker, index) of markers"
        :key="index"
        :position="{ lng: marker.latitude, lat: marker.longitude }"
        @click="infoWindowOpen(index, marker)"
        animation="BMAP_ANIMATION_BOUNCE"
      >
        <!-- 信息窗口 -->
        <bm-info-window
          :show="marker.show"
          @close="infoWindowClose(index, marker)"
          @open="infoWindowOpen(index, marker)"
        >
          <div>类型:{{ marker.typeName }}</div>
          <div>简介:{{ marker.intor }}</div>
          <div>环境:{{ marker.environmentName }}</div>
          <div>看管人姓名:{{ marker.managerName }}</div>
          <div>联系号码:{{ marker.managerTel }}</div>
        </bm-info-window>
      </bm-marker>
      <!--比例尺控件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmScale from "vue-baidu-map/components/controls/Scale";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
import "./infoWindow.css";
export default {
  name: "infoWindow",
  props: {
    map: {
      type: Object,
      default() {
        return {};
      }
    },
    markers: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    BaiduMap,
    BmScale,
    BmNavigation,
    BmMarker,
    BmInfoWindow
  },
  data() {
    return {
      list: [
        {
          latitude: "103.684298",
          longitude: "30.760913",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "103.818253",
          longitude: "30.673486",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "104.039021",
          longitude: "30.710752",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "103.968881",
          longitude: "30.499388",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "104.463308",
          longitude: "30.756444",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "104.367872",
          longitude: "30.450086",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "104.478256",
          longitude: "30.382815",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "104.062017",
          longitude: "30.697338",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "101.983123",
          longitude: "31.142462",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "101.969325",
          longitude: "29.92614",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "105.570596",
          longitude: "30.389794",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "105.570596",
          longitude: "30.389794",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "104.540347",
          longitude: "30.69535",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "108.684298",
          longitude: "30.760913",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "103.721598",
          longitude: "31.660913",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "104.684298",
          longitude: "33.760913",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "103.25749",
          longitude: "29.760913",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        },
        {
          latitude: "103.888888",
          longitude: "30.452874",
          typeName: "养殖场",
          intor: "西北一队养殖场",
          environmentName: "绿洲",
          managerName: "陈博倩",
          managerTel: "18532746628",
          show: false
        }
      ]
    };
  },
  watch: {
    map: {
      handler(newVal) {
        this.map = newVal;
      },
      deep: true
    }
  },
  methods: {
    infoWindowOpen(index, marker) {
      //打开窗口
      marker.show = true;
      this.$set(this.markers, index, marker);
      this.$emit("on-change", marker);
    },
    infoWindowClose(index, marker) {
      //关闭窗口
      marker.show = false;
      this.$set(this.markers, index, marker);
    },
    markerAddAttr() {
      //添加默认值：标记点图标、show显示隐藏控制属性
      this.markers.map((item, index) => {
        item = Object.assign(
          {
            ...(!item.markerIcon && {
              markerIcon: {
                url: "http://api0.map.bdimg.com/images/marker_red_sprite.png",
                size: {
                  width: 50,
                  height: 50
                }
              }
            }),
            ...(!item.show && { show: index > 0 ? false : true })
          },
          item
        );
        this.$set(this.markers, index, item);
      });
    }
  },
  created() {
    this.markerAddAttr();
  }
};
</script>

<style lang="scss">
.BMap_cpyCtrl {
  display: none !important;
}
.anchorBL {
  display: none !important;
}
.map-container {
  height: 900px;
}

.map-box {
  width: 100%;
  height: 100%;
}
</style>
